<!--
 * 头部工具栏
 *
 * @author Junpeng.Li
 * @date 2022-04-08 09:14:18
 *
 * 自定义事件：
 *   - connect(data): 当点击会话列表中列表内的【连接】按钮时的回调函数
-->
<template>
    <div class="top-tool">
        <div class="__block">
            <el-button type="primary" @click="openSessionList">会话列表</el-button>
            <el-button type="primary" @click="openCompile">撰写窗口</el-button>
            <el-button type="primary" @click="openFastCmd">快速命令</el-button>
            <!--<el-button type="primary" @click="openCompile">文件传输</el-button>-->
        </div>

        <el-dialog
                title="会话列表"
                :visible.sync="sessionList.visible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                width="85%"
        >
            <session-list @connect="connect"/>
        </el-dialog>
    </div>
</template>

<script>

    import SessionList from '@/components/session-list/index'

    export default {
        name: "top-tool",

        components: {
            SessionList
        },

        props: {

            /**
             * 终端列表
             */
            terminals: {
                type: Array,
                default: () => []
            },

            /**
             * 当前被激活的tab标签中name属性的值
             */
            tabActiveName: {
                type: String,
                default: () => null
            },

            /**
             * 撰写窗口
             */
            compileCom: {
                type: Object,
                default: () => {
                    return {
                        // 打开
                        open() {},

                        // 关闭
                        close() {},

                        // 获取状态，打开还是关闭
                        getStatus() {}
                    }
                }
            },

            /**
             * 快速命令窗口组件
             */
            fastCmdCom: {
                type: Object,
                default: () => {
                    return {
                        // 打开
                        open() {},

                        // 关闭
                        close() {},

                        // 获取组件的打开状态
                        getStatus() {}
                    }
                }
            }

        },

        data() {
            return {

                /**
                 * 会话列表对话框
                 */
                sessionList: {
                    visible: false
                }

            }
        },

        methods: {

            /**
             * 打开会话列表对话框
             */
            openSessionList() {
                this.sessionList.visible = true
            },

            /**
             * 调用terminal连接指令
             * @param data
             */
            connect(data) {
                this.sessionList.visible = false
                this.$emit('connect', data)
            },

            /**
             * 打开撰写窗口
             */
            openCompile() {
                if (this.compileCom.getStatus()) {
                    this.compileCom.close()
                } else {
                    this.compileCom.open()
                }
            },

            /**
             * 打开快速命令窗口
             */
            openFastCmd() {
                if (this.fastCmdCom.getStatus()) {
                    this.fastCmdCom.close()
                } else {
                    this.fastCmdCom.open()
                }
            }

        },

        computed: {

            /**
             * 当前tab的index
             * @returns {number}
             */
            index() {
                if (this.tabActiveName) {
                    return parseInt(this.tabActiveName.split('-')[1])
                }

                return -1;
            },

            /**
             * 当前tab内的terminal组件实例
             */
            terminal() {
                if (this.index === -1) {
                    return null
                }

                return this.terminals[this.index]
            }

        }
    }
</script>

<style scoped lang="scss">
    .top-tool {
        height: 34px;
        padding: 10px;
        /*border-bottom: 1px solid #eee;*/

        .__block {
            float: left;
            margin-right: 10px;
        }
    }
</style>
